<template>
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header>
      <div id="copyright">Copyright © 2022 雾海. All Rights Reserved.</div>
      <div id="logo">sea fog</div>
      <el-button id="back" type="danger" v-on:click="logout">退出</el-button>
    </el-header>
    <!-- 主体 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside>
        <div id="userinfo">
          <el-descriptions class="margin-top" title="用户信息" :column="1" border>
            <template slot="extra">
              <el-popconfirm id="zhuxiao" v-on:confirm="deleteuser" title="确定注销账号吗？">
                <el-button type="success" slot="reference" size="small">注销</el-button>
              </el-popconfirm>
            </template>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                账号
              </template>
              {{this.userid}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-star-off"></i>
                昵称
              </template>
              {{this.username}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-message"></i>
                邮箱
              </template>
              {{this.useremail}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div id="xiugai">
          <div>
            <div id="inp">
              <el-input v-model="newname" prefix-icon="el-icon-user" placeholder="请输入新的昵称"></el-input>
            </div>
            <div id="but">
              <el-button type="primary" v-on:click="upname" id="butn" size="small" v-bind:disabled="disn">修改</el-button>
            </div>
          </div>
          <div>
            <div id="inp">
              <el-input v-model="newpassword" prefix-icon="el-icon-key" placeholder="请输入新的密码"></el-input>
            </div>
            <div id="but">
              <el-button type="primary" v-on:click="uppass" id="butn" size="small" v-bind:disabled="disp">修改</el-button>
            </div>
          </div>
          <div>
            <div id="inp">
              <el-input v-model="newemail" prefix-icon="el-icon-message" placeholder="请输入新的邮箱"></el-input>
            </div>
            <div id="but">
              <el-button type="primary" v-on:click="upemail" id="butn" size="small" v-bind:disabled="dise">修改
              </el-button>
            </div>
          </div>
        </div>
        <div id="upload">
          <el-upload :action=this.uploadurl :on-error="uploadError">
            <el-button size="small" type="primary">点击上传文件</el-button>
          </el-upload>
        </div>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <template>
          <el-table
            :data="tableData.filter(data => !search || data.file_name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 979.5px" max-height="627" :row-class-name="tableRowClassName">
            <el-table-column label="文件名" prop="file_name">
            </el-table-column>
            <el-table-column label="上传时间" prop="file_time" :formatter="dateForma">
            </el-table-column>
            <el-table-column align="right">
              <template slot="header" slot-scope="scope">
                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
              </template>
              <template slot-scope="scope">
                <el-link :underline="false" :href="'http://192.168.139.128:9090/file/download/'+tableData[scope.$index].file_id" target="_blank">
                  <el-button size="mini" type="primary" >下载</el-button>
                </el-link>
                <el-button size="mini" @click="shareInfo(scope.$index)">分享</el-button>
                <el-dialog title="文件分享" :visible.sync="dialogVisible" width="30%" append-to-body>
                  <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="分享时长" prop="resource">
                      <el-radio-group v-model="form.days">
                        <el-radio label="3天" value=3></el-radio>
                        <el-radio label="7天" value=7></el-radio>
                        <el-radio label="30天" value=30></el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="分享人数" prop="resource">
                      <el-radio-group v-model="form.nums">
                        <el-radio label="3人" value=3></el-radio>
                        <el-radio label="5人" value=5></el-radio>
                        <el-radio label="10人" value=10></el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelShare">取 消</el-button>
                    <el-button type="primary" @click="shareFile">确 定</el-button>
                  </span>
                </el-dialog>
                <el-button size="mini" type="danger" @click="fileDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import moment from "moment"; //时间戳变时间
  import {
    v4 as uuidv4
  } from 'uuid' //生成随机字符串
  export default {
    data() {
      return {
        //用户模块
        userid: "",
        username: "",
        userpassword: "",
        useremail: "",
        newname: "",
        newpassword: "",
        newemail: "",
        disn: true,
        disp: true,
        dise: true,
        //文件模块
        tableData: [],
        search: '',
        uploadurl: "",
        dialogVisible: false,
        sharefileid: '',
        form: {
          days: '',
          nums: ''
        }
      }
    },
    mounted() {
      //自动加载indexs方法
      this.info();
      this.filesinfo();
      this.$nextTick(() => {
        setInterval(this.ifname, 300);
        setInterval(this.ifpass, 300);
        setInterval(this.ifemail, 300);
      })
    },
    methods: {
      //用户部分
      info: function (e) {
        console.log(this.$route.params.id);
        this.userid = this.$route.params.id;
        this.uploadurl = "http://192.168.139.128:9090/file/upload/" + this.userid;
        console.log(this.uploadurl);
        this.$axios({
            url: "http://192.168.139.128:9090/user/getuser/" + this.userid,
            method: "get",
          })
          .then((res) => {
            console.log(res.data);
            this.username = res.data.user_name;
            this.userpassword = res.data.user_password;
            this.useremail = res.data.user_email;
          })
          .catch((err) => {
            console.log(err);
            console.log(err.response.data.reason);
            alert(err.response.data.reason);
          });
      },
      deleteuser: function (e) {
        console.log("del");
        this.$axios({
            url: "http://192.168.139.128:9090/user/delete/" + this.userid,
            method: "delete",
          })
          .then((res) => {
            this.logout();
          })
          .catch((err) => {
            console.log(err);
            console.log(err.response.data.reason);
            alert(err.response.data.reason);
          });
      },
      upname: function (e) {
        this.$axios({
            url: "http://192.168.139.128:9090/user/updatename/" + this.userid,
            method: "put",
            data: {
              user_name: this.newname,
            },
          })
          .then((res) => {
            this.username = this.newname;
            this.newname = "";
          })
          .catch((err) => {
            console.log(err);
            console.log(err.response.data.reason);
            alert(err.response.data.reason);
          });
      },
      uppass: function (e) {
        this.$axios({
            url: "http://192.168.139.128:9090/user/updatepassword/" + this.userid,
            method: "put",
            data: {
              user_password: this.newpassword,
            },
          })
          .then((res) => {
            this.userpassword = this.newpassword;
            this.newpassword = "";
          })
          .catch((err) => {
            console.log(err);
            console.log(err.response.data.reason);
            alert(err.response.data.reason);
          });
      },
      upemail: function (e) {
        this.$axios({
            url: "http://192.168.139.128:9090/user/updateemail/" + this.userid,
            method: "put",
            data: {
              user_email: this.newemail,
            },
          })
          .then((res) => {
            this.useremail = this.newemail;
            this.newemail = "";
          })
          .catch((err) => {
            console.log(err);
            console.log(err.response.data.reason);
            alert(err.response.data.reason);
          });
      },
      ifname: function (e) {
        if (this.newname == "" || this.newname == null) {
          this.disn = true;
          return;
        }
        this.disn = false;
      },
      ifpass: function (e) {
        if (this.newpassword == "" || this.newpassword == null) {
          this.disp = true;
          return;
        }
        this.disp = false;
      },
      ifemail: function (e) {
        if (this.newemail == "" || this.newemail == null) {
          this.dise = true;
          return;
        }
        this.dise = false;
      },
      logout: function (e) {
        //清除sessionStorage中的数据
        sessionStorage.clear();
        // 跳转到登录页
        this.$router.push({
          name: 'Login'
        })
        //删除vuex中的数据,让当前页面刷新
        window.location.reload();
      },
      //文件模块
      filesinfo: function (e) {
        var that = this;
        this.$axios({
            url: "http://192.168.139.128:9090/file/listfile/" + this.userid,
            method: "get",
          })
          .then((res) => {
            console.log(res.data);
            that.tableData = res.data;
            console.log(that.tableData);
          })
          .catch((err) => {
            console.log(err);
            console.log(err.response.data.reason);
            alert(err.response.data.reason);
          });
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        new Date().getTime()
        var rem = rowIndex % 4;
        if (rem === 1) {
          return 'warning-row';
        } else if (rem === 3) {
          return 'success-row';
        }
        return '';
      },
      uploadError(err, file, fileList) {
        console.log(err);
        alert("文件重名!");
      },
      shareInfo(index) {
        console.log(index);
        this.sharefileid = this.tableData[index].file_id;
        console.log(this.sharefileid);
        this.dialogVisible = true;
      },
      shareFile() {
        var that = this;
        this.dialogVisible = false;
        var sharetime = new Date().getTime()/1000 + parseInt(this.form.days) * 86400;
        var sharenum = parseInt(this.form.nums);
        var shareyard = uuidv4().substr(1, 5);
        console.log(sharetime);
        console.log(sharenum);
        console.log(shareyard);
        console.log(this.sharefileid);
        this.$axios({
            url: "http://192.168.139.128:9090/file/updateshare/" + this.sharefileid,
            method: "put",
            data: {
              file_share_time: sharetime,
              file_share_num: sharenum,
              file_share_yard: shareyard
            },
          })
          .then((res) => {
            var Shareurl = "http://localhost:8080/share/"+ that.sharefileid;
            alert("分享链接为: "+Shareurl+"\n提取码为: "+shareyard);
          })
          .catch((err) => {
            console.log(err);
            console.log(err.response.data.reason);
            alert(err.response.data.reason);
          });
        this.form.days = '';
        this.form.nums = '';
      },
      cancelShare() {
        this.dialogVisible = false;
        this.form.days = '';
        this.form.nums = '';
      },
      
      fileDelete(index) {
        this.$axios({
            url: "http://192.168.139.128:9090/file/delete/" + tableData[index].file_id,
            method: "get",
          })
          .then((res) => {
            console.log("Ok");
          })
          .catch((err) => {
            console.log(err);
            console.log(err.response.data.reason);
            alert(err.response.data.reason);
          });
      },
      //时间格式化转换
      dateForma: function (row, column, data) {
        return moment.unix(data).format("YYYY-MM-DD HH:mm:ss");
      },
    }
  }
</script>

<style scoped>
  @import url("../styles/css/common.css");

  .home-container {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }

  .el-header {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(90deg,
        cyan,
        purple);
    background-size: 400%;
    animation: myanimation 10s infinite;
  }

  @keyframes myanimation {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  #copyright {
    color: aliceblue;
    position: absolute;
    top: 60%;
    left: 1%;
  }

  #logo {
    color: aliceblue;
    font-size: 25px;
    font-weight: 800;
    text-transform: uppercase;
    position: absolute;
    top: 15%;
    left: 45%;
  }

  #back {
    position: absolute;
    top: 15%;
    left: 92%;
  }

  #userinfo {
    position: absolute;
    top: 60px;
    width: 300px;
  }

  #zhuxiao {
    position: absolute;
    top: 5px;
    left: 235px;
  }

  #xiugai {
    position: absolute;
    top: 235px;
    left: 20px;
    width: 250px;
  }

  #inp {
    position: relative;
    top: 15px;
  }

  #but {
    position: relative;
    top: 15px;
    bottom: 10px;
    height: 40px;
  }

  #butn {
    position: relative;
    top: 5px;
    left: 45%;
  }

  #upload {
    position: relative;
    width: 104px;
    height: 32px;
    left: 98px;
    top: 500px;
  }

  .el-descriptions__title {
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .el-aside {
    background: #dcdde0;
    width: 300px;
  }

  .el-main {
    background: #eaedf1;
  }

  .el-table {
    position: absolute;
    top: 60px;
    left: 300px;
  }
</style>